<template>
  <div class="searchlist">
    <SearchtopCom @changekeyword="changeKeyword" />

    <van-dropdown-menu>
      <van-dropdown-item v-model="value" :options="option" />
      <van-dropdown-item title="筛选" ref="item">
        <van-cell center title="包邮">
          <template #right-icon>
            <van-switch v-model="switch1" size="24" active-color="#ee0a24" />
          </template>
        </van-cell>
        <van-cell center title="团购">
          <template #right-icon>
            <van-switch v-model="switch2" size="24" active-color="#ee0a24" />
          </template>
        </van-cell>
        <div style="padding: 5px 16px">
          <van-button type="danger" block round @click="onConfirm">
            确认
          </van-button>
        </div>
      </van-dropdown-item>
    </van-dropdown-menu>
    <SearchprolistCom :linkdata="keyword"  :linkdata2="brandlist"/>
  </div>
</template>

<script>

import SearchprolistCom from "@/components/SearchprolistCom";
import Vue from "vue";
import { Search } from "vant";
import { Switch } from "vant";
import { Button } from "vant";
import { Cell } from "vant";
import { DropdownMenu, DropdownItem } from "vant";
import SearchtopCom from "@/components/SearchtopCom";

Vue.use(Switch);
Vue.use(Cell);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Button);
Vue.use(Search);
export default {
  data() {
    return {
      value: 0,
      switch1: false,
      switch2: false,
      option: [
        { text: "全部商品", value: 0 },
        { text: "新款商品", value: 1 },
        { text: "活动商品", value: 2 },
      ],
      keyword: "",
      brandlist:''
    };
  },
  components: {
    SearchprolistCom,
    SearchtopCom,
  },
  methods: {
    onConfirm() {
      this.$refs.item.toggle();
    },
    changeKeyword(keyword) {
      console.log("changeKeyword", keyword);
      this.keyword = keyword;
    },
  },
  created() {
    this.keyword = this.$route.params.data;
    //获取品牌对应的产品列表
    this.brandlist = this.$route.params.category,this.$route.params.brand;
    // console.log(this.brandlist);
    
  },
  beforeRouteLeave(to, from, next) {
    to.meta.keepAlive = true;
    next(0);
  },
};
</script>

<style scoped>
.btnsearch {
  background-color: red;
  color: #fff;
  padding: 0 0.2778rem;
  border-radius: 0.3333rem;
}
</style>